<div class="tql">
  <div class="form-inline">
    <ng-container *ngFor="let filter of filters; let i = index">
      <ng-container *ngIf="i < 6">
        <tql-condition [rule]="rule" [filter]="filter"
                       (conditionChangeEvent)="conditionChange($event)"></tql-condition>
      </ng-container>
    </ng-container>

    <div class="btn-group">
      <input [(ngModel)]="fulltextKeywords" (change)="fulltextKeywordsChange()"
             type="search" class="form-control form-control-sm keywords"
             id="fulltextKeywords" name="fulltextKeywords" placeholder="全文检索关键字">
    </div>

    <div class="btn-group more">
      <tql-condition-selection [filters]="filters"></tql-condition-selection>
    </div>

    <div class="btn-group">
      <button (click)="search()" type="button" class="btn btn-default btn-with-icon btn-sm">
        <i class="fa fa-search"></i>搜索
      </button>
    </div>
    <div class="btn-group">
      <span (click)="addToFavorites()" class="link">收藏</span>
    </div>

  </div>

  <div class="form-inline">
    <ng-container *ngFor="let filter of filters; let i = index;">
      <ng-container *ngIf="i >= 6 && filter.display">
        <tql-condition [rule]="rule" [filter]="filter"
                       (conditionChangeEvent)="conditionChange($event)"></tql-condition>
      </ng-container>
    </ng-container>
  </div>

</div>
